<template>
    <div class="page-container">
      <el-tabs v-model="activeTab" class="settings-tabs">
        <el-tab-pane label="账户设置" name="account">
          <el-card shadow="never">
            <template #header>
              <h3>账户信息</h3>
            </template>
            <el-form :model="accountForm" label-width="120px">
              <el-form-item label="姓名">
                <el-input v-model="accountForm.name" />
              </el-form-item>
              <el-form-item label="电子邮箱">
                <el-input v-model="accountForm.email" disabled />
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="accountForm.phone" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary">保存更改</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>
        
        <el-tab-pane label="安全设置" name="security">
          <el-card shadow="never">
            <template #header>
              <h3>安全设置</h3>
            </template>
            <div class="security-item">
              <div class="security-info">
                <h4>登录密码</h4>
                <p>定期修改密码有助于账户安全</p>
              </div>
              <el-button type="primary" plain>修改密码</el-button>
            </div>
            
            <el-divider />
            
            <div class="security-item">
              <div class="security-info">
                <h4>双重验证</h4>
                <p>已开启 - 登录时需要验证手机短信</p>
              </div>
              <el-button type="info" plain>修改设置</el-button>
            </div>
            
            <el-divider />
            
            <div class="security-item">
              <div class="security-info">
                <h4>API密钥</h4>
                <p>未配置 - 用于系统集成</p>
              </div>
              <el-button type="primary" plain>生成密钥</el-button>
            </div>
          </el-card>
        </el-tab-pane>
        
        <el-tab-pane label="支付设置" name="payment">
          <el-card shadow="never">
            <template #header>
              <h3>支付方式</h3>
            </template>
            <div class="payment-methods">
              <div class="payment-card">
                <el-icon :size="40"><CreditCard /></el-icon>
                <div class="payment-info">
                  <h4>信用卡</h4>
                  <p>**** **** **** 1234</p>
                </div>
                <el-button type="danger" plain>移除</el-button>
              </div>
              
              <el-divider />
              
              <div class="payment-card">
                <el-icon :size="40"><Money /></el-icon>
                <div class="payment-info">
                  <h4>支付宝</h4>
                  <p>未绑定</p>
                </div>
                <el-button type="primary" plain>绑定</el-button>
              </div>
              
              <el-divider />
              
              <div class="payment-card">
                <el-icon :size="40"><Cellphone /></el-icon>
                <div class="payment-info">
                  <h4>微信支付</h4>
                  <p>未绑定</p>
                </div>
                <el-button type="primary" plain>绑定</el-button>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { CreditCard, Money, Cellphone } from '@element-plus/icons-vue'
  
  const activeTab = ref('account')
  
  const accountForm = reactive({
    name: '张经理',
    email: 'zhang@example.com',
    phone: '13800138000'
  })
  </script>
  
  <style lang="scss" scoped>
  .page-container {
    padding: 20px;
    
    .settings-tabs {
      :deep(.el-tabs__header) {
        margin-bottom: 20px;
      }
    }
    
    .security-item, .payment-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      
      .security-info, .payment-info {
        flex: 1;
        margin: 0 20px;
        
        h4 {
          margin: 0 0 5px 0;
          font-size: 16px;
        }
        
        p {
          margin: 0;
          color: #909399;
          font-size: 14px;
        }
      }
    }
    
    .payment-card {
      .el-icon {
        color: #409EFF;
      }
    }
  }
  </style>